<template>
	<view class="projectDetail-container">
		<view class="project-top">
			<view class="project-name">
				项目名称
			</view>
			<view class="project-money">
				级别
				<!-- <span>元</span> -->
			</view>
		</view>
		<view class="tagsList">
			<view class="tags" v-for="item in tagList" :key="item.id">{{ item.name }}</view>
		</view>
		<view class="publisher-container" @tap="gotoPublisher">
			<view class="publisher-avator">
				<view class="cu-avatar round"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
				<span>赵女士</span>
			</view>
			<view class="publisher-location">
				<view class="cu-item">
					<text class="lg text-gray cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="richText">
			<rich-text :nodes="html"></rich-text>
		</view>
		<!-- 底部栏固定 -->
		<view class="contact-tabbar">
				<view class="padding">
					<view class="cu-avatar-group">
						<view class="cu-avatar round md" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
					</view>
				</view>
				<view class="contact-btn">
					<button class="cu-btn bg-blue shadow-blur lg" open-type="contact">去组队</button>
				</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatar: [
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
			],
			html: `<p>项目详情</p>

					<p>（一）主要内容</p>

					<p>1. 提供多学科的作业辅导服务，覆盖数学、物理、化学、语言学等多个学科领域。<br />
					2. 实现在线一对一辅导功能，使学生能够与专业导师进行实时交流。<br />
					3. 提供作业批改服务，帮助学生了解作业中的错误并提供改进建议。<br />
					4. 支持学生提交问题并获得解答，促进学术讨论和知识分享。</p>

					<p>（二）任职要求</p>

					<p>1. 对工作充满激情，具备积极主动的工作态度。<br />
					2. 具备良好的学习能力和适应能力，能够快速适应新环境和新技术。<br />
					3. 良好的组织和计划能力，能够有效地管理和推动工作进展。</p>
					`,
			tagList: [
				{
					id: 1,
					name: '本科'
				},
				{
					id: 2,
					name: '硕士'
				},
				{
					id: 3,
					name: '博士'
				},
			],
		};
	},
	methods:{
		gotoPublisher(){
			uni.navigateTo({
				url: '/subpackage/publisher-project/publisher-project'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.project-money{
		margin-right: 30rpx;
		margin-top: 30rpx;
	}
.cu-btn.lg.data-v-2888cb16 {
	    padding: 0 40rpx;
	    font-size: 32rpx;
	    height: 100rpx;
	    width: 100px;
	    border-radius: 50px;
	}
	.cu-avatar-group {
	    direction: rtl;
	    unicode-bidi: bidi-override;
	    padding: 0 10rpx 0 40rpx;
	    display: flex;
	}
.publisher-container .publisher-avator ._span {
    margin-left: 10rpx;
    font-size: 14px !important;
}
.publisher-container .publisher-location text {
    font-size: 18px !important;
    color: #A8A8A8;
}
.cu-btn.lg {
    padding: 0 40rpx;
    font-size: 38rpx;
    height: 100rpx;
    width: 200px;
}
.contact-tabbar{
	.contact-btn{
		margin-right: 70rpx;
	}
	.favor-container{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-left: 50rpx;
	}
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	font-size: 18px;
	box-shadow: 0 0 10rpx #ccc;
	z-index: 999;
}
.richText{
	margin: 20rpx 0;
}
.projectDetail-container {
	padding: 20upx 20upx;
}

.project-top {
	margin-bottom: 20rpx;
	display: flex;
	font-size: 18px;
	justify-content: space-between;
	align-items: center;

	span {
		font-size: 12px;
		font-weight: normal;
		margin-left: 5rpx;
	}
}

.tagsList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 12px;

	.tags {
		color: #1094A3;
		background-color: #E7F4F6;
		padding: 2px 5px;
		border-radius: 10rpx;
		margin-right: 10px;
	}
}

.publisher-container {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;

	.publisher-avator {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		span {
			margin-left: 10rpx;
		}
	}

	.publisher-location {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		text {
			font-size: 12px;
			color: #A8A8A8;
		}
	}
}</style>
